<template>
  <el-dialog
    title="登录日志"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="closeAddDialog"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <div class="content">
      <el-table
        :data="tableData"
        height="400"
        :header-cell-style="headerStyle"
        class="table"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户账号"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="device"
          label="产品类型"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.device == 'PC'" type="success">平台</el-tag>
            <el-tag v-else type="warning">小程序</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="success"
          label="登录状态"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.success == 1" type="danger">失败</el-tag>
            <el-tag v-else type="success">成功</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="ipaddr"
          label="登录IP地址"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="loginLocation"
          label="登录地点"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="browser"
          label="浏览器类型"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="os"
          label="操作系统"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="msg"
          label="操作信息"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="loginTime"
          label="登录时间"
          align="center"
          min-width="120"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>

      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="limit"
        @pagination="LoginLog"
        class="pagination"
      />
    </div>
  </el-dialog>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqLoginLog } from "@/api/api";
import { mapState } from "vuex";
export default {
  name: "",
  components: { Pagination },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.LoginLog();
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 获取登录日志
    async LoginLog() {
      let res = await reqLoginLog(this.page, this.limit, {
        userId: this.user.userId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //   console.log(res);
      this.tableData = res.data.rows;
      this.total = res.data.total || 0;
    },
    // 点击确定修改密码
    async addSubmit() {
      this.dialogVisible = false;
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="less"></style>
